<script lang="ts">
export default {
  name: "EntityTable"
}
</script>

<template>
  <!-- 数据表单 -->
  <el-table
      ref="dataTableRef"
      v-loading="dataState.loading"
      :data="dataState.entityList"
      border
      highlight-current-row
      @row-click="handleRowClick"
  >
    <el-table-column type="expand">
      <template #default="props">
        <el-table
            ref="dataTableRef"
            :data="props.row.members"
            border
            highlight-current-row
        >
          <el-table-column align="center" label="分组名" min-width="80" prop="groupName"/>
          <el-table-column align="center" label="成员名" min-width="80" prop="member"/>
          <el-table-column align="center" label="操作" width="150">
            <template #default="scope">
              <el-button :icon="Delete" circle plain type="danger" @click.stop="handleDeleteMember(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>

    <el-table-column label="分组名称" min-width="100" prop="groupName"/>
    <el-table-column label="责任人" min-width="100" prop="ownerId"/>
    <el-table-column label="是否有效" width="80" prop="valid"/>
    <el-table-column :formatter="formatDate4elTableColumn" align="center" label="创建时间" width="180"
                     prop="createTime"/>
    <el-table-column :formatter="formatDate4elTableColumn" align="center" label="更新时间" width="180"
                     prop="updateTime"/>

    <el-table-column align="center" label="操作" width="150">
      <template #default="scope">
        <el-button :icon="Plus" circle plain type="primary" @click.stop="handleInsertMember(scope.row)"/>
        <el-button :icon="Delete" circle plain type="danger" @click.stop="handleDeleteGroup(scope.row)"/>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页工具条 -->
  <pagination v-if="dataState.total > 0" v-model:limit="dataState.queryParams.pageSize" v-model:page="dataState.queryParams.pageNum" :total="dataState.total"
              @pagination="handleQuery"/>
</template>

<script lang="ts" setup>
import {onMounted, reactive} from "vue";

import {
  RepoGroupItem,
  RepoGroupQueryParam
} from "@/api/cloud/repository/repogroup/types";
import {
  listRepoGroupEntityPages,
} from "@/api/cloud/repository/repogroup";
import {Plus, Delete} from '@element-plus/icons-vue';
import {formatDate4elTableColumn,} from '@/utils/formatter';

const emit = defineEmits(['rowClick', 'insertMember','deleteMember','deleteGroup']);// 定义组件的事件通知

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({refreshTable});

// 数据状态：定义
let dataState = reactive({
  // 页面转载状态
  loading: true,
  // 选中ID数组
  ids: [],
  // 记录总数
  total: 0,
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoGroupQueryParam,
  // 实体数据
  entityList: [] as RepoGroupItem[],
});

function handleRowClick(row: any) {
  emit('rowClick', row);
}

function handleDeleteGroup(row: any) {
  emit('deleteGroup', row);
}

function handleDeleteMember(row: any) {

  emit('deleteMember', row);
}

function handleInsertMember(row: any) {
  emit('insertMember', row);
}

/**
 * 刷新页面信息
 */
function handleQuery() {
  emit('rowClick', {});

  dataState.loading = true;

  dataState.entityList = [];
  listRepoGroupEntityPages(dataState.queryParams).then(({data}) => {
    data.list.forEach(value => {
      dataState.entityList.push(value)
    });

    dataState.total = data.total;
    dataState.loading = false;
  });
}

/**
 * 刷新表单
 */
function refreshTable(queryParams: RepoGroupQueryParam) {
  dataState.queryParams = queryParams;
  if (dataState.queryParams.groupName === '') {
    dataState.queryParams.groupName = undefined;
  }


  handleQuery();
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  // 查询实体数据
  handleQuery();
});

</script>
